<template>
  <div class="dashboard">
    <el-row :gutter="25">
      <el-col :span="12">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="25">
      <el-col :span="12">
        <div class="chart-wrapper">
          <line-chart />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-wrapper">
          <pie-progress-bar />
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import BarChart from './components/BarChart'
import PieChart from './components/PieChart'
import LineChart from './components/LineChart'
import PieProgressBar from './components/PieProgressBar'
export default {
  name: 'Index',
  components: {
    BarChart,
    PieChart,
    LineChart,
    PieProgressBar
  },
  date() {
    return {

    }
  }

}
</script>

<style  lang="scss" scoped>
.dashboard {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  min-width: 2000px;

 .chart-wrapper {
    background: rgb(255, 255, 255);
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

</style>
